<!-- get_ip.html -->
<!DOCTYPE html>
<html>
<head>
    <title>IP查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            width: 400px;
            margin: 0 auto;
            padding-top: 100px;
        }

        .input {
            display: flex;
        }

        .input input[type="text"] {
            flex: 1;
            padding: 8px;
            font-size: 16px;
        }

        .input button {
            padding: 8px 16px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            border: none;
        }

        .input button:hover {
            background-color: #45a049;
        }

        .result {
            height: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
            background-color: white;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="input">

        <input type="text" id="ipInput" placeholder="请输入IP地址">
        <button onclick="query()">查询</button>

    </div>
    <div class="error-msg" id="errorMsg"></div>
    <div
            class="result" id="result">
    </div>

</div>

<script>
    function query() {
        var ip = document.getElementById('ipInput').value;
        var errorMsg = document.getElementById('errorMsg');
        var result = document.getElementById('result');

        if (ip.trim() === '') {
            errorMsg.innerHTML = '请先输入IP地址';
            result.innerHTML = '';
            return;
        } else {
            errorMsg.innerHTML = '';
        }

        // 发起查询请求，此处使用AJAX向后端发送查询请求
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.kit9.cn/api/ip_location/api.php?ip=' + ip, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var res = JSON.parse(xhr.responseText);
                // 更新页面上的结果显示
                result.innerHTML =  'city: ' + res.data.city + '<br>';
                result.innerHTML += 'isp: ' + res.data.isp + '<br>';
                result.innerHTML += 'country: ' + res.data.country + '<br>';
                result.innerHTML += 'prov: ' + res.data.prov + '<br>';
                result.innerHTML += 'msg: ' + res.msg + '<br>';

            }
        };
        xhr.send();
    }
</script>
</body>
</html>